<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>2_state的简写方式</title>
    </head>
    <body>
        <!-- 准备好一个“容器” -->
        <div id="test"></div>
        <!-- 引入react核心库 -->
        <script type="text/javascript" src="../js/react.development.js"></script>
        <!-- 引入react-dom，用于支持react操作DOM -->
        <script type="text/javascript" src="../js/react-dom.development.js"></script>
        <!-- 引入babel，用于将JSX转为JS -->
        <script type="text/javascript" src="../js/babel.min.js"></script>


        <script type="text/babel">
            //1.创建类式组件
            class MyComponent extends React.Component{
                //初始化对象
                state = {isHot:true,wind:"微风",}
                
                //读取状态
                render(){
                    const {isHot,wind} = this.state
                    return(
                        <h2 onClick= {this.changeWeather}>今天,天气很{isHot ? '炎热' : '凉爽'},{wind}</h2>
                    )
                }

                //自定义方法————要用赋值语句的形式+箭头函数
                changeWeather = () =>{
                    const isHot = this.state.isHot
                    this.setState({isHot : !isHot})
                }
            }
            //2.渲染组件到页面
            ReactDOM.render(<MyComponent/>,document.getElementById('test'))
        </script>
    </body>
</html>
